import React from 'react';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { Form, Input, Button, message } from 'antd';
import { useIntl, FormattedMessage } from 'umi';

export interface SelectProps {
  onSearch: (values: any) => void;
  children?: any;
}

const MRPSearch: React.FC<SelectProps> = (props: SelectProps) => {
  const [form] = Form.useForm();
  const intl = useIntl();

  const search = (values: any) => {
    if (typeof props.onSearch === 'function') {
      props.onSearch(values);
    }
  };

  const handleReset = () => {
    form.resetFields();
    message.success(intl.formatMessage({ id: 'pages.resetComplete' }));
  };

  return (
    <Form form={form} onFinish={search} layout='inline'>      
        <Form.Item name="jobNum" label={intl.formatMessage({ id: 'pages.workOrderNumber' })}>
          <Input placeholder={intl.formatMessage({ id: 'pages.enterWorkOrderNumber' })} />
        </Form.Item>
        <Form.Item name="keywords" label={intl.formatMessage({ id: 'pages.keywords' })}>
          <Input placeholder={intl.formatMessage({ id: 'pages.enterKeywords' })} />
        </Form.Item>
        <Form.Item>
            <Button.Group>
              <Button
                type="primary"
                icon={<SearchOutlined />}
                htmlType="submit"
                title={intl.formatMessage({ id: 'pages.search' })}
              >
                <span><FormattedMessage id="pages.search" /></span>
              </Button>
              <Button icon={<ReloadOutlined />} onClick={handleReset} title={intl.formatMessage({ id: 'pages.reset' })}>
                <span><FormattedMessage id="pages.reset" /></span>
              </Button>
            </Button.Group>
            {props.children}
        </Form.Item>
    </Form>
  );
};

export default MRPSearch;
